<template>
  <div class="app-container">
    <el-steps
      :active="3"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="步骤1" description="编辑基本信息"></el-step>
      <el-step title="步骤2" description="上传详细信息"></el-step>
      <el-step title="步骤3" description="发布课程"></el-step>
    </el-steps>

    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="hospital-home">
        <div class="common-header">
          <div class="title-wrapper">
            <span class="hospital-title">{{ course.coursesName }}</span>
            <div class="icon-wrapper">
              <span class="iconfont" v-if="course.courseCategories === 1"
                >必修</span
              >
              <span class="iconfont" v-if="course.courseCategories === 2"
                >专选</span
              >
              <span class="iconfont" v-if="course.courseCategories === 3"
                >公选</span
              >
            </div>
          </div>
        </div>
        <div class="info-wrapper">
          <img
            class="hospital-img"
            :src="course.headshotUrl"
          />
          <div class="content-wrapper">
            <div>课程信息</div>
            <div class="line">
              <div>
                <span class="label">学分：</span
                ><span>{{ course.credit }}学分</span>
              </div>
              <div class="space">
                <span class="label"
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学时：</span
                ><span>{{ course.courseTime }}学时</span>
              </div>
              <div class="space">
                <span class="label">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;修读学期：</span
                ><span>{{ course.termNumber }}学期</span>
              </div>
            </div>
            <div class="line">
              <div>
                <span class="label">平时分占比：</span
                ><span>{{ course.scoreProportion }}%</span>
              </div>
              <div class="space">
                <span class="label">所属学院：</span
                ><span>{{ course.collegeName }}</span>
              </div>
              <div class="space">
                <span class="label">任课教师：</span
                ><span>{{ course.teacherName }}</span>
              </div>
            </div>
            <div style="margin-top: 20px">课程简介</div>
            <div class="rule-wrapper">
              {{ course.introduction }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="btn">
      <el-button type="primary" @click="saveCourse()">发布课程</el-button>
      <el-button @click="previous()">返回修改</el-button>
    </div>
  </div>
</template>

<script>
import courseApi from "@/api/course";
export default {
  data() {
    return {
      course: {},
    };
  },

  created() {
    if (this.$route.params && this.$route.params.id) {
      this.course.coursesId = this.$route.params.id;
      console.log(this.$route.params.id);
    }
    
    this.getCourseInfoById();
  },
  methods: {
    saveCourse() {
      this.$message({
        type: "success",
        message: "添加课程信息成功!",
      });
      this.$router.push({ path: "/course/list" });
    },
    previous() {},
    getCourseInfoById() {
      courseApi.getCourseById(this.course.coursesId).then((res) => {
        this.course = res.data.course;
      });
    },
  },
};
</script>

<style>
#introduce {
  width: 1200px;
  font-size: 10px;
}
.btn {
  margin: 10px 10px;
  text-align: center;
}
</style>